<template>
  <div id="user-item">
    <div
      class="flex-box"
      v-if="userInfo.focus_user_id != null || userInfo.id != null"
    >
      <div class="left-box">
        <div class="user-cover">
          <img
            :src="userInfo.logo | ipfsHash"
            alt="cover"
            v-if="userInfo.logo != null"
          />
          <RandomAvatar
            :user_address="userInfo.focus_user_id"
            v-if="userInfo.logo == null && userInfo.focus_user_id != null"
          />
          <RandomAvatar
            :user_address="userInfo.user_address"
            v-if="userInfo.logo == null && userInfo.user_address != null"
          />
        </div>
      </div>
      <div class="right-box">
        <div class="username" v-if="userInfo.nickname != null">
          {{ userInfo.nickname }}
        </div>
        <div class="username" v-else>
          {{ userInfo.focus_user_id | filterAddress }}
        </div>
        <div class="user-info">简介</div>
        <div class="count-box">
          <div class="count-item">1.1k 粉丝</div>
          <div class="count-item">24 作品</div>
        </div>
      </div>
      <div class="btn-box">
        <div
          class="follow-btn btn"
          v-if="!userInfo.isFollow"
          @click="followUser"
        >
          <i class="iconfont icon-add"></i><span>关注</span>
        </div>

        <el-popover
          placement="top"
          width="160"
          v-model="popVisible"
          v-if="userInfo.isFollow"
        >
          <p>是否取消关注</p>
          <div style="text-align: right; margin-top: 10px">
            <el-button size="mini" type="text" @click="popVisible = false"
              >取消</el-button
            >
            <el-button type="primary" size="mini" @click="unfollowUser"
              >确定</el-button
            >
          </div>
          <div slot="reference" class="btn followed-btn">
            <i slot="reference" class="icon-right1 iconfont"></i
            ><span>已关注</span>
          </div>
        </el-popover>
      </div>
    </div>
  </div>
</template>

<script>
import { focusUser } from "@/api";
export default {
  name: "UserItem",
  props: ["userInfo"],
  data() {
    return {
      popVisible: false,
    };
  },
  methods: {
    // 关注用户
    async followUser() {
      // 验证后用户已登录，关注用户
      let id;
      if (this.userInfo.focus_user_id != null) {
        id = this.userInfo.focus_user_id;
      } else if (this.userInfo.user_address != null) {
        id = this.userInfo.user_address;
      }
      let focusResult = await focusUser(id.toString());
      if (focusResult.flag) {
        this.$message({
          message: focusResult.msg,
          type: "success",
          customClass: "el-message-custom",
        });
      } else {
        this.$message({
          message: focusResult.msg,
          type: "error",
          customClass: "el-message-custom",
        });
      }
      console.log(focusResult);

      // 重新获取数据
      this.$emit("queryData");
    },

    // 取消关注
    async unfollowUser() {
      // 取消关注用户
      // 确定取消
      let unfocusResult = await focusUser(
        this.userInfo.focus_user_id.toString()
      );
      if (unfocusResult.flag) {
        this.$message({
          message: unfocusResult.msg,
          type: "success",
          customClass: "el-message-custom",
        });
        // 重新获取数据
        this.$emit("queryData");
      } else {
        this.$message({
          message: unfocusResult.msg,
          type: "error",
          customClass: "el-message-custom",
        });
      }
    },
  },
};
</script>

<style lang='less' scoped>
#user-item {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
  align-items: center;
  margin-bottom: 20px;
  .flex-box {
    display: flex;
    .left-box {
      .user-cover {
        width: 70px;
        height: 70px;
        img {
          border-radius: 50%;
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
    }
    .right-box {
      margin-left: 30px;
      flex: 1;
      .username {
        font-size: 18px;
      }
      .user-info {
        font-size: 12px;
        color: #999;
        margin-top: 10px;
      }
      .count-box {
        display: flex;
        margin-top: 10px;
        font-size: 12px;
        color: #666;
        .count-item {
          margin-right: 20px;
        }
      }
    }
    .btn-box {
      display: flex;
      flex-direction: column;
      justify-content: center;
      .btn {
        padding: 6px 15px;
        border-radius: 10px;
        cursor: pointer;
        :first-child {
          margin-right: 5px;
        }
        width: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .follow-btn {
        border: 1px solid var(--themeColor1);
        background: var(--themeColor1);
        color: #fff;
      }
      .followed-btn {
        background: #eee;
        color: #fff;
      }
    }
  }
}
</style>